<template>
  <div id="app">
    <sell-header :seller="seller"></sell-header>
    <sell-nav></sell-nav>
    <keep-alive>
      <transition :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass">
        <router-view ref="view" @touchstart.native="touchStart" @touchend.native="touchEnd" :seller="seller" :goods="goods" :ratings="ratings"></router-view>
      </transition>
    </keep-alive>
  </div>
</template>

<script>
import SellHeader from 'pages/header/Header'
import SellNav from 'pages/Nav'
import axios from 'axios'
import { urlParse } from '@/assets/js/tools'

export default {
  name: 'App',
  components: {
    SellNav,
    SellHeader
  },
  data () {
    return {
      seller: {},
      goods: [],
      ratings: [],
      slideDirection: '',
      routerList: ['/goods', '/ratings', '/sellers']
    }
  },
  mounted () {
    this.getSellData()
  },
  methods: {
    getSellData () {
      axios.get('/api/data.json?id=' + this.sellerId)
        .then(this.getSellDataSucc)
    },
    getSellDataSucc (res) {
      if (res.status === 200 && res.data) {
        let data = res.data
        this.seller = data.seller
        this.$set(this.seller, 'id', this.sellerId)
        this.goods = data.goods
        this.ratings = data.ratings
      }
    },
    touchStart (e) {
      this.slideStart = e.touches[0].clientX
    },
    touchEnd (e) {
      this.slideEnd = e.changedTouches[0].clientX
      let slideLen = this.slideEnd - this.slideStart
      this.slideDirection = slideLen < 0 ? 'left' : 'right'
      let routerIndex = this.routerList.indexOf(this.$route.path)
      if (Math.abs(slideLen) > 80) {
        if (this.slideDirection === 'left' && routerIndex < this.routerList.length - 1) {
          this.$router.push(this.routerList[routerIndex + 1])
        } else if (this.slideDirection === 'right' && routerIndex > 0) {
          this.$router.push(this.routerList[routerIndex - 1])
        }
      }
    }
  },
  computed: {
    sellerId () {
      let queryParam = urlParse()
      return queryParam.id
    },
    enterActiveClass () {
      return this.slideDirection === 'right' ? 'animated slideInLeft' : 'animated slideInRight'
    },
    leaveActiveClass () {
      return this.slideDirection === 'right' ? 'animated slideOutRight' : 'animated slideOutLeft'
    }
  }
}
</script>

<style>

</style>
